Tabellsidan

Några råd

Större tabeller kan ta tid att göra. Om man har tillgång till ett kalkylprogram t.ex Excel så är det ofta bättre att göra tabellen klar där först. Därefter kan man konvertera till HTML. Detta kan göras på flera sätt. Microsofts "Internet Assistent för Excel" går att hämta på Internet. I Web Thing för Windows 95 kan man använda drag-and-drop dvs man kan dra en tabell från ett Excel-blad och "släppa" den i en box. Flera HTML-editorer kan importera tabeller t.ex. WebEdit.

En konverterad tabell blir emellertid ofta inte exakt som man vill ha den. Då är det bra att kunna skriva om HTML-koderna.

Netscape 1.1 tabeller

Här följer några fler exempel på tabeller som framför allt fungerar i Netscape 1.1

CELLPADDING och CELLSPACING

CELLPADDING bestämmer avståndet från cellens innehåll till cellkanten.
CELLSPACING bestämmer avståndet mellan cellerna.
BORDER ger tabellen ett tredimensionellt utseende. Storleken på BORDER kan anges med ett värde precis som avstånden när det gäller CELLPADDING och CELLSPACING. BORDER utan värde eller BORDER=1 ger en liten ram. BORDER=0 eller ingen BORDER nämnd betyder ingen ram alls.

I den första tabellen är CELLPADDING=0, CELLSPACING=0 och BORDER=1.
I den andra tabellen är CELLPADDING=15, CELLSPACING=0 och BORDER=1.
I den tredje tabellen är CELLPADDING=0, CELLSPACING=15 och BORDER=1..
I den fjärde tabellen är CELLPADDING=15, CELLSPACING=15 och BORDER=1.
I den femte tabellen är CELLPADDING=0, CELLSPACING=0 och BORDER=8.
I den sjätte tabellen är CELLPADDING=15, CELLSPACING=15 och BORDER=8.
I den sjunde tabellen är CELLPADDING=15, CELLSPACING=15 och BORDER=0.

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 Cell 2
Cell 3 Cell 4

ROWSPAN

ROWSPAN används när man vill sträcka sig över flera rader i en tabell. I den andra tabellen finns i cell 2 två radbrytningar (BR) för att texten ska bli på tre rader. I den tredje tabellen finns en radbrytning (BR) i cell 1 för att texten ska bli på två rader.

cell 1 ROWSPAN=3 dvs cell 2 har tre rader cell 3
cell 4 cell 5
cell 6 cell 7

cell 1 ROWSPAN=3
dvs
cell 2 har tre rader		 cell 3
cell 4 cell 5
cell 6 cell 7

ROWSPAN=2 dvs
cell 1 har två rader		 cell 2 cell 3
cell 4 cell 5

COLSPAN

COLSPAN används när man vill sträcka sig över flera kolumner i en tabell.

cell 1 COLSPAN=3 ger för cell 2 en sträckning över tre kolumner
cell 3 cell 4 cell 5cell 6

ROWSPAN och COLSPAN

ROWSPAN=2 och
COLSPAN=2 för cell 1		 Cell 2 Cell 3 Cell 4 Cell 5
Cell 6 Cell 7 Cell 8 Cell 9
Cell 10 Cell 11 Cell 12 ROWSPAN=2 och
COLSPAN=2 för Cell 13		 Cell 14
Cell 15 Cell 16 Cell 17 Cell 18

COLSPAN och tabellhuvud

På båda de två översta raderna är alla celler kolumnrubriker (TH).

COLSPAN=2 för Huvud 1 COLSPAN=2 för Huvud 2
Huvud 3 Huvud 4 Huvud 5 Huvud 6
Cell 1 Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7 Cell 8
Cell 9 Cell 10 Cell 11 Cell 12
Cell 13 Cell 14 Cell 15 Cell 16

Huvud på sidan

Man kan använda både TH och TR på en rad.

Huvud 1 cell 1 cell 2
Huvud 2 cell 3 cell 4

Rubriker både överst och till vänster

Försäljare
TorstenRobert
Ort Lund2415
Malmö3226

ALIGN=LEFT|RIGHT|CENTER

ALIGN kan användas för enskilda celler eller hela rader.

Rubrik 1 Rubrik 2 Rubrik 3
Centrerad rad I mitten Ytterligare
en centrerad cell
Till höger I mitten Standard dvs
till vänster

VALIGN=TOP|BOTTOM|MIDDLE

ALIGN kan användas för enskilda celler eller hela raden

Rubrik 1 Rubrik 2 Rubrik 3
Hela raden i topp Också
i topp		 Texten i topp
I toppen I botten Standard
(default)

Tabeller inne i andra tabeller

I den stora tabellen finns inne i cell 3 en annan tabell. I denna andra tabell finns inne i cell 42 ytterligare en tabell.

Cell 1 Cell 2 Cell 3
Cell 11 Cell 12
Cell 21 Cell 22
Cell 31 Cell 32
Cell 41 Cell 42
Cell 101 Cell 102
Cell 201 Cell 202
Cell 4 Cell 5 Cell 6

WIDTH och HEIGHT

WIDTH och HEIGHT kan användas för att bestämma storleken på en tabell.
Den första tabellen har WIDTH="50%" och HEIGHT="50%" dvs tabellen får en area på 25 % av hela sidan. Den andra tabellen har WIDTH="100%" och HEIGHT="100%" dvs den får precis plats på en sida.

HEIGHT=50% WIDTH=50%
Lite textLite mer text

HEIGHT=100% WIDTH=100%
Lite textLite mer text

Storleken på en cell

WIDTH och HEIGHT kan användas också för att bestämma storleken på en cell.
I den första tabellen har själva tabellen WIDTH="75%" medan cell 1 har WIDTH=25% och cell 2 WIDTH=75%. Innehållet i cell 1 får därför på en liten skärm inte plats på en rad.

WIDTH=25% i cell 1 WIDTH=75% i cell 2
Cell 3Cell 4

En tabell i en annan tabell

I de tre tabellerna nedan finns i cell 3 en annan tabell med de två cellerna 31 och 32. Alla tre huvudtabellerna har WIDTH="70%". I den översta tabellen har tabellen i cell 3 WIDTH="100%" dvs den inryms precis i cell 3.
I den andra tabellen har tabellen i cell 3 WIDTH="50%" dvs den upptar halva cell 3.
Den tredje tabellen har dessutom HEIGHT=70% och i cell 3 har tabellen där WIDTH=50% och HEIGHT=30%

Cell 1Cell 2
Cell 31Cell 32
Cell 4

Cell 1Cell 2
Cell 31Cell 32
Cell 4

Cell 1Cell 2
Cell 31Cell 32
Cell 4

Internet Explorer 3.0 tabeller

Här följer några fler exempel på tabeller som framför allt fungerar i Internet Explorer 3.0 som i stort sett följer förslaget till hur tabeller ska fungera i HTML3.

Kolumnerna kan delas in i grupper och för varje grupp kan man ange om innehållet skall ligga till vänster, centrerat eller till höger i cellerna. COLGROUP SPAN=2 betyder att två kolumner ligger i samma kolumngrupp och man kan för en hel kolumngrupp bestämma t.ex. ALIGN=CENTER. I den första tabellen nedan är andra-femte kolumnerna från vänster en kolumngrupp och sjätte-sjunde kolumnerna en kolumngrupp.

Tabeller kan ges ett huvud med THEAD och en kropp med TBODY samt en fot med TFOOT. I första tabellen nedan är första raden huvud, andra och tredje raden kropp och nedersta raden foten. Den yttre ramen (frame) finns här bara till vänster och höger pga FRAME=VSIDES. När det gäller de inre ramarna (rules) visas enbart avskiljningen mellan huvud THEAD, kropp TBODY och fot TFOOT samt mellan kolumngrupper med hjälp av RULES=GROUPS. GROUPS kallades tidigare BASIC.

De inre ramarna har röd färg med en särskild skugga med hjälp av BORDERCOLORDARK=#FF0000. Man kan ge en färg åt en cell men också åt en ram med BORDERCOLOR. BORDERCOLORDARK och BORDERCOLORLIGHT är andra alternativ för färg åt en ram som ger lite annorlunda utseende jämfört med bara BORDERCOLOR. En tabell kan inte bara ha bakgrundsfärg utan också en bild som bakgrund vilket fås med TABLE BACKGROUND= följt av bildfilen inom citationstecken. De här tabellerna har en bakgrundsbild. Här används också CELLPADDING=4.

I den andra tabellen gäller istället FRAME=above dvs enbart ramen längst upp syns och RULES=none dvs inga inre ramar visas. Dessutom gäller en blå BODERCOLORLIGHT ram.

I den tredje tabellen gäller istället FRAME=hsides dvs enbart ramen längst upp och längst ner syns och RULES=rows dvs alla inre ramar mellan raderna visas. Dessutom gäller en lila BODERCOLOR ram.

I den fjärde tabellen gäller istället FRAME=void dvs inga yttre ramar visas RULES=cols dvs enbart inre ramar mellan kolumnerna visas.
Länkar till de flesta sidorna i kursen
Startsidan Sidan 1 Sidan 2 Sidan 3 Sidan 4 Sidan 5 Sidan 6
Sidan 7 Sidan 8 Sidan 9 Sidan 10 Sidan 11 Sidan 12 Sidan 13
Sidan 14 Sidan 15          
Elementen Länksidan Teckenkoder Söksidan Formulärsidan Med frames Editorer och Läsare

Länkar till de flesta sidorna i kursen
Startsidan Sidan 1 Sidan 2 Sidan 3 Sidan 4 Sidan 5 Sidan 6
Sidan 7 Sidan 8 Sidan 9 Sidan 10 Sidan 11 Sidan 12 Sidan 13
Sidan 14 Sidan 15          
Elementen Länksidan Teckenkoder Söksidan Formulärsidan Med frames Editorer och Läsare

Länkar till de flesta sidorna i kursen
Startsidan Sidan 1 Sidan 2 Sidan 3 Sidan 4 Sidan 5 Sidan 6
Sidan 7 Sidan 8 Sidan 9 Sidan 10 Sidan 11 Sidan 12 Sidan 13
Sidan 14 Sidan 15          
Elementen Länksidan Teckenkoder Söksidan Formulärsidan Med frames Editorer och Läsare

Länkar till de flesta sidorna i kursen
Startsidan Sidan 1 Sidan 2 Sidan 3 Sidan 4 Sidan 5 Sidan 6
Sidan 7 Sidan 8 Sidan 9 Sidan 10 Sidan 11 Sidan 12 Sidan 13
Sidan 14 Sidan 15          
Elementen Länksidan Teckenkoder Söksidan Formulärsidan Med frames Editorer och Läsare